<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cui.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/body.css">
    <link rel="stylesheet" href="./css/bottom.css">
    <script src="./js/rem.js"></script>
    <!-- 轮播图 -->
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <script src="./swiper/swiper-bundle.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="header">
            <div class="statusBar"></div>
            <div class="title">奈商城</div>
        </div>
        <div class="body">
            <div class="sousuo">
                <div class="search">
                    <img src="./image/search.png" alt="">
                    <input type="text" name="" id="" value="输入您要搜索的宝贝..">
                </div>
                <div class="right">
                    <div class="info">
                        <img src="./image/信息.png" alt="">
                    </div>
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./image/banner1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./image/banner2.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
            </div>
            <script>
                var mySwiper = new Swiper('.swiper', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })        
            </script>
            <div class="nav">
                <ul>
                    <li>
                        <div class="icon">
                            <img src="./image/home-cat1.png" alt="">
                        </div>
                        <span>菲茨</span>
                    </li>
                    <li>
                        <div class="icon">
                            <img src="./image/home-cat2.png" alt="">
                        </div>
                        <span>克奈圃</span>
                    </li>
                    <li>
                        <div class="icon">
                            <img src="./image/home-cat3.png" alt="">
                        </div>
                        <span>服装</span>
                    </li>
                    <li>
                        <div class="icon">
                            <img src="./image/home-cat4.png" alt="">
                        </div>
                        <span>其它</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="bottom">
            <div class="title">
                <div class="zuo"></div>
                <p>精彩推荐</p>
                <div class="you"></div>
            </div>
            <div class="list2">
                <div class="list">
                    <div class="left">
                        <div class="tupian">
                            <img src="./image/banner1.jpg" alt="">
                        </div>
                        <div class="wenzi">
                            <p>莫次有机PWE活性美白洗面奶</p>
                            <div class="money">
                                <p>￥169</p>
                                <p>￥220</p>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="tupian">
                            <img src="./image/banner2.jpg" alt="">
                        </div>
                        <div class="wenzi">
                            <p>莫次有机PWE活性美白洗面奶</p>
                            <div class="money">
                                <p>￥169</p>
                                <p>￥220</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="left">
                        <div class="tupian">
                            <img src="./image/banner1.jpg" alt="">
                        </div>
                        <div class="wenzi">
                            <p>莫次有机PWE活性美白洗面奶</p>
                            <div class="money">
                                <p>￥169</p>
                                <p>￥220</p>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="tupian">
                            <img src="./image/banner2.jpg" alt="">
                        </div>
                        <div class="wenzi">
                            <p>莫次有机PWE活性美白洗面奶</p>
                            <div class="money">
                                <p>￥169</p>
                                <p>￥220</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="navigation">
            <ul>
                <li>
                    <div class="icon">
                        <img src="./image/首页-选中.png" alt="">
                    </div>
                    <p>首页</p>
                </li>
                <li>
                    <div class="icon">
                        <img src="./image/购物车.png" alt="">
                    </div>
                    <p>购物车</p>
                </li>
                <li>
                    <div class="icon">
                        <img src="./image/我的.png" alt="">
                    </div>
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>